import React, {createRef, useState} from 'react';
import { Modal, Button, message, Input, Upload, Row, Col, Space, Image, Avatar } from 'antd';
import style from './index.module.css';
import { throttle } from '../../utils/throttle';
import { post } from '../../utils/post';
const { TextArea } = Input;

/*
* 发评论的弹窗组件
* */
// type=['comment','reply']
function CommentModal(props) {
    const [loading, changeLoading] = useState(false);
    const [value,changeValue]= useState('')
    const token=localStorage.getItem('TOKEN')
    const {msgId}=props
    const handleOk = async () => {
        changeLoading(true)
        if (!value) {
            message.warning('请输入一点东西吧~')
            changeLoading(false);
            props.changeShow(false);
            return
        }
        if(props.type===0){
            const res =await post(`/share/${msgId}/comment`,{
                content:value
            }, token)
            if(res.data.code===0){
                message.success('评论成功')
                changeLoading(false);
                props.changeShow(false);
                changeValue('')
            }
            else{
                message.error('评论失败')
                changeLoading(false);
            } 
            console.log(res,"comment");
        }
        else if(props.type===1){
            post(`/share/${msgId}/reply`,{
                content:value
            }, token).then(res => {
                if(res.data.code===0){
                    message.success('回复成功')
                    changeLoading(false);
                    props.changeShow(false);
                    changeValue('')
                }
                else{
                    message.error('回复失败')
                    changeLoading(false);
                }
                
            })
        }
    };
    const handleCancel = () => {
        setTimeout(() => {
            props.changeShow(false);
        }, 0);

    };
    const onChange = e => {;
        changeValue(e.target.value)
    };

    const showInfo = () => {
        const avatar = JSON.parse(localStorage.getItem("USERDATA"))?.avatar;
        return (
            <>
                <Avatar src={avatar}  />
                <p className={`${style.title}`}>评论/回复</p>
            </>
        )
    }

    const content = () => {
        return (
            <>
                <TextArea
                    className={`${style.input}`}
                    allowClear={true}
                    showCount
                    maxLength={100}
                    value={value}
                    placeholder="说点什么...."
                    onChange={(e)=>throttle(onChange(e), '500')}
                />
                <Row className={`${style.bottom}`}>
                    <Col span={8} offset={8}
                        style={{position: "absolute", right: '24px'}}
                    >
                        <Button type="primary" shape="round" onClick={handleOk} loading={loading} style={{ float: 'right' }}>
                            发送
                        </Button>
                    </Col>
                </Row>
            </>
        )
    }
    return (
        <>
            <Modal
                style={{ position: 'absolute', left: '35%', height: '280px' }}
                bodyStyle={{ borderRadius: '20px', height: '280px' }}
                width={600}
                visible={props.show}
                onCancel={handleCancel}
                footer={null}
                mask={true}
                position="relative"
            >
                {
                    showInfo()
                }{
                    content()
                }
            </Modal>
        </>

    );
}
export default CommentModal;
